<template>
	<view class="container">
		<navBar @back="back" :title="t('commission.PromotionRecords')"></navBar>
		<!-- 头部区域 -->
		<view class="header-section">
			<view class="user-info">
				<image class="avatar" src="../../static/1.jpg" mode="aspectFill"></image>
				<text class="username">geogre</text>
			</view>
		</view>

		<!-- 导航标签 -->
		<view class="nav-tabs">
			<view class="tab active">
				<text>{{ t("common.Video") }}(0)</text>
			</view>
			<view class="tab">
				<text>{{ t("index.Earn") }}(0)</text>
			</view>
			<view class="time-filter" @click="openActionSheet">
				<text>{{ choseVal ? choseVal : t("common.placeholder2") }}</text>
				<tn-icon name='down'></tn-icon>
			</view>
		</view>

		<!-- 推广数据 -->
		<view class="promotion-data">
			<view class="section-title">{{ t("commission.PromotionData") }}</view>

			<view class="data-grid">
				<view class="data-item">
					<view class="data-value highlight">15.2K</view>
					<view class="data-label">{{ t("commission.PromotionTimes") }}</view>
				</view>
				<view class="data-item">
					<view class="data-value highlight">0₫</view>
					<view class="data-label">{{ t("commission.PromotionCommission") }}</view>
				</view>
				<view class="data-item">
					<view class="data-value highlight">15.2K</view>
					<view class="data-label">{{ t("commission.PromotionSold") }}</view>
				</view>
				<view class="data-item">
					<view class="data-value highlight">3.7K</view>
					<view class="data-label">{{ t("commission.PromotionGMV") }}</view>
				</view>
			</view>
		</view>
		<view class="no-records">
			{{ t("commission.NoPromotionRecords") }}

		</view>
		<!-- 推荐产品 -->
		<view class="recommendation">
			<!-- 标签 -->
			<view class="tags">
				<view class="tag hot">
					<image src="../../static/commission/icon1.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
					<text>{{ t("commission.HotProducts") }}</text>
				</view>
				<view class="tag approval">
					<image src="../../static/commission/icon.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
					<text>{{ t("commission.HighApprovalRate") }}</text>
				</view>
			</view>


		</view>
		<view class="product-list">
			<!-- 产品列表 -->
			<view class="product-item">
				<image class="product-image" src="../../static/1.jpg" mode="aspectFill"></image>
				<view class="product-details">
					<view class="product-title">ชุดเครื่องมือสายการผลิต แพ็ค 523w</view>

					<view class="product-tags">
						<view class="product-tag youpik">Youpik High Com.</view>
						<view class="product-tag commission">23%</view>
					</view>

					<view class="product-price">47.000₫ ~ 168.000₫</view>

					<view class="product-earn-tag">
						<view class="earn-label">Earn</view>
						<view class="earn-value">10.810₫-38.640₫</view>
					</view>
				</view>
			</view>
			<view class="product-info">
				<view class="product-sold">
					<tn-icon name="flame" color="#ff4d6a" size="24"></tn-icon>
					<text><img src="../../static/commission/icon.png" alt=""> 976 Sold/Month</text>
				</view>

				<view class="apply-button">
					<tn-button bg-color="#ff4d6a" text-color="#ffffff" padding="10rpx 30rpx"
						radius="8rpx">{{ t("commission.ApplySample") }}</tn-button>
				</view>
			</view>
		</view>
		<tn-action-sheet ref="actionSheetRef"></tn-action-sheet>
	</view>
</template>

<script setup>
import navBar from "../../components/navBar/index.vue"
import {
	ref
} from "vue"

import {
	useI18n
} from 'vue-i18n'
const actionSheetRef = ref()
const {
	t
} = useI18n()
const choseVal = ref('')
const actions = [{
	text: t('commission.sameDay'),
	value: '1'
},
{
	text: t('commission.pastSevenDays'),
	value: '2'
},
{
	text: t('commission.30day'),
	value: '3'
},
{
	text: t('commission.90day'),
	value: '3'
},
]
const openActionSheet = () => {
	actionSheetRef.value?.show({
		actions: [{
			text: t('commission.sameDay'),
			value: '1'
		},
		{
			text: t('commission.pastSevenDays'),
			value: '2'
		},
		{
			text: t('commission.30day'),
			value: '3'
		},
		{
			text: t('commission.90day'),
			value: '3'
		},
		],
		cancelText: '',
		select: (index, value) => {
			console.log('选项被点击', index, value, actionSheetRef.value)
			choseVal.value = actions[index].text
			actionSheetRef.value?.close()
			return false
		}
		// select: (index: number, value ? : string | number) => {
		// 	console.log('选项被点击', index, value)
		// }
	})
}

const back = () => {
	uni.navigateBack()
}
</script>

<style lang="scss">
.container {
	background: url(../../static/commission/bg.png) no-repeat center center / cover;
	min-height: 100vh;
}

/* 头部区域样式 */
.header-section {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
}

.user-info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-bottom: 10rpx;
	border: 2rpx solid #FD2D55;
}

.username {
	font-size: 24rpx;
	color: #ff4d6a;
}

/* 导航标签样式 */
.nav-tabs {
	display: flex;
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.tab {
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	margin-right: 20rpx;
	font-size: 28rpx;
	color: #666;
}

.tab.active {
	background-color: #ff4d6a;
	color: #ffffff;
}

.time-filter {
	margin-left: auto;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #666;
}

/* 推广数据样式 */
.promotion-data {
	background-color: #ffffff;

	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 60rpx;
	padding-top: 38rpx;
	padding-left: 30rpx;
}

.data-grid {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

.data-item {
	width: 50%;
	margin-bottom: 30rpx;
}

.data-value {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.highlight {
	color: #ff4d6a;
}

.data-label {
	font-size: 24rpx;
	color: #999;
}

/* 推荐产品样式 */
.recommendation {
	background-color: #ffffff;
}

.no-records {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	margin-bottom: 30rpx;
	width: 90%;
	margin: 40rpx auto 38rpx;
}

.tags {
	margin-bottom: 30rpx;
}

.tag {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	padding: 20rpx 0 20rpx 20rpx;
}

.tag text {
	margin-left: 10rpx;
}

.hot {
	color: #333;
}

.approval {
	color: #333;
}

/* 产品项样式 */
.product-item {
	display: flex;
	border-top: 2rpx solid #f0f0f0;
	padding-top: 20rpx;
}

.product-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
	margin: 0 20rpx;
}

.product-details {
	flex: 1;
	position: relative;
}

.product-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	line-height: 1.4;
}

.product-tags {
	display: flex;
	margin-bottom: 16rpx;
}

.product-tag {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	margin-right: 10rpx;
}

.youpik {
	background-color: #ff4d6a;
	color: #ffffff;
}

.commission {
	background-color: #ff4d6a;
	color: #ffffff;
}

.product-price {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 16rpx;
}

.product-earn-tag {
	display: inline-flex;
	align-items: center;
	background-color: #ff4d6a;
	border-radius: 6rpx;
	margin-bottom: 16rpx;
}

.earn-label {
	font-size: 22rpx;
	color: #ffffff;
	padding: 4rpx 12rpx;
	background-color: #ff4d6a;
	border-radius: 6rpx 0 0 6rpx;
}

.earn-value {
	font-size: 22rpx;
	color: #ff4d6a;
	padding: 4rpx 12rpx;
	background-color: #ffebee;
	border-radius: 0 6rpx 6rpx 0;
}

.product-sold {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #666;
	margin-bottom: 16rpx;
	margin-left: 20rpx;
	margin-top: 32rpx;
}

.product-sold text {
	margin-left: 8rpx;
}

.product-info {
	display: flex;
	justify-content: space-between;
	border-top: 1rpx solid #f5f5f5;
}

.product-list {
	width: 686rpx;
	height: 346rpx;
	background: #FFFFFF;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	margin: 20rpx auto;
}

.apply-button {
	margin-right: 20rpx;
	padding-top: 20rpx;

}
</style>